<template>
  <div class="app-container">

    <el-form
      ref="searchForm"
      :rules="rules"
      :inline="true"
      :model="formSearch"
      class="demo-form-inline formHeight"
    >
      <!-- :rules="[ { required: true, message: '请输入关键词'}]" -->
      <el-form-item
        prop="searchTxt"
        :label="type === 'groupManage' ? '档案名称' : '分类名称'"
      >
        <el-input
          v-model="formSearch.searchTxt"
          size="mini"
          clearable
          placeholder="请输入关键词"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="search">查询</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="handler('add')"
        >新增</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="list"
      style="width: 100%; margin-top: 20px"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-for="(item, index) in tableHead"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        width="auto"
      >
        <template slot-scope="scope">
          <template v-if="item.prop === 'status_txt'">
            <el-tag
              :type="scope.row[item.prop] === '正常' ? 'success' : 'danger'"
            >{{ scope.row[item.prop] }}</el-tag>
          </template>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        show-overflow-tooltip
        width="300px"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            @click="handler('see', scope.row.id)"
          >查看</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="handler('edit', scope.row.id)"
          >编辑</el-button>
          <el-button
            type="danger"
            size="mini"
            @click="deleteItem(scope.row, scope.$index)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      style="float: right"
      layout="total ,prev, pager, next,jumper"
      :total="pageTotal"
      :page-size="limit"
      @current-change="changePage"
    />

    <div>
      <commonDialog
        ref="commonDialog"
        :form-table="formTable"
        :show-model="showModel"
        :module-type="moduleType"
        @fatherClose="closeDialog"
        @fatherEdit="editTable"
        @fatherAdd="addTable"
      />
    </div>
  </div>
</template>

<script>
import commonMix from '../mixin/commonMix.js'

export default {
  name: 'comminIndex',
  mixins: [commonMix],
  props: {
    type: {
      type: String,
      default: ''
    },

    tableHead: {
      type: Array,
      default: () => []
    },
    formTable: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: [],
      multipleSelection: []
      // 正常1 禁用 0
    }
  },
  mounted() {},
  methods: {
    // toggleSelection(rows) {
    //   if (rows) {
    //     rows.forEach(row => {
    //       this.$refs.multipleTable.toggleRowSelection(row)
    //     })
    //   } else {
    //     this.$refs.multipleTable.clearSelection()
    //   }
    // },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>
.page_box {
  margin: 0 auto;
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.formHeight {
  height: 38px;
}
</style>
